<template>
    <view class="page-wallet position-r">
        <view class="page-wallet__bg full-w position-a">
            <image src="@/static/wallet_bg.png" mode="widthFix" style="width:100%"></image>
        </view>
        <view class="page-wallet__header position-r">
            <u-navbar
                title="我的钱包"
                :autoBack="true"
                bgColor="rgba(0,0,0,0)"
                :titleStyle="{color:'#fff'}"
                leftIconColor="#fff"
            >
            </u-navbar>
            <view class="mr-l-76">
                <view class="font28 lh-40 color-white">充电可用余额（元）</view>
                <view class="font52 lh-74 color-white">{{balance}}</view>

                <view class="flex flex-start mr-t-30">
                    <u-button type="primary" :customStyle="{width:'152rpx',height:'54rpx',marginLeft:0}" shape="circle" color="#35BE65"  text="充值" @click="charge"></u-button>
                </view>
                
                  
            </view>
              
                
        </view>
        
          
        <view class="page-wallet__body position-r mr-t-48 mr-v-24">
            
            <view class="bg-white border8  pd-v-16 mr-t-20">
                <view class="flex pd-h-40 flex-center border-b" @click="reChargeRecord">
                    <view class="flex-1 flex flex-center">
                        <view class="flex-1 font32 lh-48 color-default">
                            充值明细
                        </view>
                        <u-icon name="arrow-right" size="14" color="#AAAAAA"></u-icon>
                    </view>
                    
                </view>

                <view class="flex pd-h-40 flex-center border-b" @click="costRecord">
                    <view class="flex-1 flex flex-center">
                        <view class="flex-1 font32 lh-48 color-default">
                            消费明细
                        </view>
                        <u-icon name="arrow-right" size="14" color="#AAAAAA"></u-icon>
                    </view>
                    
                </view>
            </view>
              
            
              
        </view>
          
        
        <reChargeComponent ref="reCharge" @confirm="confirm"></reChargeComponent>
          
    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';


import reChargeComponent from '@/components/reCharge.vue'
import { walletBalance,recharge } from '@/api/user.js'
const reCharge = ref(null)

const store = useStore();
const balance = ref(0)

onShow(() => {
    if(store?.user?.token) {
        getWalletBalance()
    }
})



onLoad(() => {
    

})


const getWalletBalance = () => {
    walletBalance().then(res => {
        
        if(res.code == 200) {
            balance.value = res.data
        }
    })
}


const charge = () => {
    reCharge.value.show()
}

const reChargeRecord = () => {
    uni.navigateTo({
        url: '/sub_user/pages/reChargeRecord/reChargeRecord'
    })
}

const costRecord = () => {
    uni.navigateTo({
        url: '/sub_user/pages/costRecord/costRecord'
    })
}


const confirm = (e) => {
    console.log(e,'eeeeee')
    uni.showLoading({
        title: '正在支付'
    })
    recharge(e).then(res => {
        console.log(res,'ssssssssssss')
        uni.hideLoading()
        if(res.code == 200) {
            uni.requestPayment({
                provider: 'wxpay',
                timeStamp: res.data.timeStamp+'',
                nonceStr: res.data.nonceStr,
                package: res.data.prepayId,
                signType: 'RSA',
                paySign: res.data.paySign,
                success: function (res) {
                    uni.showToast({
                        title: '支付成功',
                        icon: 'success',
                        duration: 2000
                    })
                    getWalletBalance()
                },
                fail: function (res) {
                    uni.showToast({
                        title: '取消支付',
                        icon: 'none',
                        duration: 2000
                    })
                }
            })
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none'
            })
        }
    }).catch(err => {
        console.log(err,'err')  
        uni.hideLoading()
        uni.showToast({
            title: '支付失败',
            icon: 'none',
            duration: 2000
        })
    })
    
    // setTimeout(() => {
    //     uni.hideLoading()
    //     uni.showToast({
    //         title: '支付成功',
    //         icon: 'success',
    //         duration: 2000
    //     })
    // }, 2000)
}


</script>

<style scoped lang="scss">
.page-wallet {
    background: #F7F7F7;
    min-height:100vh;

    .page-wallet__bg {
        height:404rpx;
        left:0;
        top:0;
        z-index: 1;
    }

    .page-wallet__header {
        z-index: 2;
        padding-top:196rpx;

        .avatar {
            width: 108rpx;
        }
        
    }

    .page-wallet__body {
        z-index: 2;

        .border-b {
            border-bottom: 1px solid #E4F2EC;
        }
    }
}
</style>
